<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="门店选择">
        <el-select v-model="searchForm.shopId" placeholder="请选择">
          <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.shopId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间选择">
        <el-date-picker v-model="searchForm.date" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane v-for="list in topicList" :key="list.topicId" :label="list.name" :name="list.name">
        <game-list :topicList="list"></game-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import moment from 'moment';
import 'moment/locale/zh-cn';
import http from '@/services/xhr';
import apiSetting from '@/services/api';
import gameList from '@/pages/booking/game.list';

export default {
  data() {
    return {
      storeList: [],
      topicList: [],
      searchForm: {
        shopId: 2342342,
        date: ''
      },
      activeName: ''
    };
  },
  mounted() {
    http(apiSetting.getStores)
      .then(res => {
        this.storeList = res.data.data.list;
        this.searchForm.store = this.storeList[0].shopId;
      })
      .then(() => {
        this.searchForm.date = moment().format('YYYY-MM-DD');
        this.storeChange();
      });
  },
  components: {
    gameList
  },
  methods: {
    storeChange() {
      let data = {
        shopId: this.searchForm.shopId,
        platformId: ''
      };
      http(apiSetting.getTopicList, data).then(res => {
        this.topicList = res.data.data.topicListVo;
        this.activeName = this.topicList[0].name;
      });
    }
  }
};
</script>
